<template>
    <el-cascader
            clearable ref="fa" v-model="options" :options="_dataList" :props="defaultProps"  :style="{width: '100%'}" :checkStrictly="false"  :disabled="disabled"></el-cascader>
</template>
<script>
    import api from "@/api/index";
    import {handleTree} from "@/utils/common";
    export default {
        name:"DeptCascaderSelect",
        data(){
            return{
                defaultProps: {
                    multiple: true,
                    value: "id",
                    children: "children",
                    label: "name",
                    leaf:"leaf"
                },
                _list:[],
                _dataList:[]
            }
        },
        props:{
            list:{
                type:Array,
                defalut:function () {
                    return []
                }
            },
            dataList:{
                type:Array,
                defalut:function () {
                    return []
                }
            },
            value:{
                type:String,
                defalut:""
            },
            disabled:{
                type:Boolean,
                defalut:false
            }
        },
        created() {
          if(this.dataList&&this.dataList.length>0){
              this._dataList = this.dataList
              this._list = this.list
          }else{
              this.getSimpleDeptList()
          }
        },
        computed: {
            options: {
                get() {
                    let list = [];
                    if (this.value) {
                        let valueList = this.value.split(",")
                        for (let i = 0; i < valueList.length; i++) {
                            let id = valueList[i]
                            for (let j = 0; j < this._list.length; j++) {
                                if (this._list[j].id == id) {
                                    if(this._list[j].parent_dept){
                                        list.push([this._list[j].parent_dept, id])
                                    }else{
                                        list.push([id])
                                    }

                                }
                            }
                        }
                    }
                    return list
                },
                set(v) {
                    if(v){
                        let realValue = v.map(item => {
                            return item[1]?item[1]:item[0]
                        }).join(",")
                        this.$emit("input",realValue)
                    }
                }
            }
        },
        methods:{
            getSimpleDeptList() {
                api.getSimpleDeptList()
                    .then(res => {
                        this._list=res.data
                        this._dataList = handleTree(res.data, "id", "parent_dept");
                    });
            },
        }
    }
</script>
